<!doctype html>
<html style="overflow-x: hidden; overflow-y: auto;">
<head>
    <meta charset="utf-8">
    <title>漏刻有时数据可视化仪表盘</title>
    <meta name="description" content="漏刻有时（LOCKDATA），智能化数据展示解决方案服务商，让更多的人看到数据可视化的魅力，促进前沿技术与产业融合，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，满足会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。">
    <meta name="author" content="Poleung">
    <script type="text/javascript" src="static/lockdata/js/jquery.js"></script>
    <script type="text/javascript" src="static/lockdata/js/echarts.min.js"></script>
    <script type="text/javascript" src="static/lockdata/js/visual.js"></script>
    <script type="text/javascript" src="static/lockdata/js/times.js"></script>
    <script type="text/javascript" src="static/lockdata/js/jquery.liMarquee.js"></script>
    <link rel="stylesheet" href="static/lockdata/css/common.css">
</head>

<body>
<div>
    <!-- 加载动画 -->
    <div class="loading">
        <div class="loadbox"><img src="static/lockdata/images/loading.gif">Loading...</div>
    </div>

    <div class="back"></div>
    <div class="head">
        <div class="demo"><img id="retreat" src="static/lockdata/images/retreat.png" title="开启/退出全屏"/></div>
        <div class="weather"><span id="showTime" style="font-size: 1vw;"></span></div>
        <h1><img src="static/lockdata/images/logo.png" title="漏刻有时数据可视化仪表盘">漏刻有时数据可视化仪表盘</h1>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height:400px;">
                    <div class="alltitle">任务进程分布</div>
                    <div class="navboxall" id="echart5"></div>
                </div>
                <div class="boxall" style="height:260px;">
                    <div class="alltitle">公司完成率</div>
                    <div class="navboxall">
                        <div class="wraptit">
                            <span>姓名</span><span>销售</span><span>任务</span><span>完成率</span>
                        </div>
                        <div class="wrap">
                            <ul id="wtbody"></ul>
                        </div>
                    </div>
                </div>
                <div class="boxall" style="height:260px;">
                    <div class="alltitle">人均占比分布</div>
                    <div class="navboxall" id="echart1"></div>
                </div>
            </li>

            <li>
                <div class="boxall" style="height:230px">
                    <div class="clearfix navboxall" style="height: 100%">
                        <div class="pulll_left num">
                            <div class="numbt">当前销售金额<span>(单位：元)</span></div>
                            <div class="numtxt"><span class="cnum">888888</span></div>
                        </div>
                        <div class="pulll_right zhibiao">
                            <div class="zb1"><span>男女比例</span>
                                <div id="zb1"></div>
                            </div>
                            <div class="zb2"><span>已完成比例</span>
                                <div id="zb2"></div>
                            </div>
                            <div class="zb3"><span>总任务比例</span>
                                <div id="zb3"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="boxall" style="height:350px">
                    <div class="alltitle">月度任务进程</div>
                    <div class="navboxall" id="echart4"></div>

                </div>
                <div class="boxall" style="height:340px">
                    <div class="alltitle">销售VS任务</div>
                    <div class="navboxall" id="echart3"></div>
                </div>
            </li>

            <li>
                <div class="boxall" style="height:300px">
                    <div class="alltitle">任务排行榜</div>
                    <div class="navboxall">
                        <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <thead>
                            <tr>
                                <th scope="col">排名</th>
                                <th scope="col">姓名</th>
                                <th scope="col">销售</th>
                                <th scope="col">任务</th>
                                <th scope="col">完成率</th>
                            </tr>
                            </thead>
                            <tbody id="sales">
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="boxall" style="height: 300px">
                    <div class="alltitle">完成率排行榜</div>
                    <div class="navboxall">
                        <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <thead>
                            <tr>
                                <th scope="col">排名</th>
                                <th scope="col">姓名</th>
                                <th scope="col">销售</th>
                                <th scope="col">任务</th>
                                <th scope="col">完成率</th>
                            </tr>
                            </thead>
                            <tbody id="profit"></tbody>
                        </table>
                    </div>
                </div>

                <div class="boxall" style="height:320px">
                    <div class="alltitle">最佳销售分布</div>
                    <div class="navboxall" id="echart2"></div>
                </div>
            </li>
        </ul>
    </div>
    <!--漏刻有时角标-->
    <a id="datav-text-logo" target="_blank" href="http://www.lockdata.cn">
        <img src="static/lockdata/images/TB1EBjryY9YBuNjy0FgXXcxcXXa-500-129.png" width="50">
    </a>
</div>

<script>
    $(function () {
        $('.wrap').liMarquee({
            direction: 'up', /*身上滚动*/
            runshort: false, /*内容不足时不滚动*/
            scrollamount: 20/*速度*/
        });

        /* 全屏按钮开关*/
        $('#retreat').on('click', function (e) {
            var element = document.documentElement;
            if (!$('body').hasClass("full-screen")) {
                $('body').addClass("full-screen");
                $('#alarm-fullscreen-toggler').addClass("active");
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }

            } else {
                $('body').removeClass("full-screen");
                $('#retreat').removeClass("active");
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }

            }
        });
    });
</script>
</body>
</html>